<template>
    <div class="navbar">
      <div class="menu" v-if="type=='menu'" @click="toggleMenu"></div>
      <div class="back" v-if="type=='back'" @click="onBack"></div>
      <div class="title">Zheng</div>
      <div class="right-bar" v-if="type=='menu'">
        <div class="right-bar-item">
          <div class="menu-button"><div>登录</div></div>
        </div>
        <div class="right-bar-item">
          <div class="menu-button"><div>注册</div></div>
        </div>
        <dropdown_item class="right-bar-item"  :dropdownList="dropdownList"></dropdown_item>
      </div>
    </div>
</template>

<style lang="less" scoped>

  .navbar{
    color: rgb(255,255,255);
    z-index: 9998;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    padding-left: 12px;
    padding-right: 8px;
    display: flex;
    flex-direction: row;
    height: 66px;
    background-color: #003a8c;
    align-items: center;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
  }

  .left-item{

    border-radius: 5px;
    margin-right: 5px;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    /*background-color: rgba(200,30,30,0.2);*/
  }

  .menu{
    .left-item;
    background-image: url("./img/menu.png");
  }

  .back{
    .left-item;
    background-image: url("./img/back.png");
  }

  .title{
    padding-left: 15px;
    text-align: left;
    flex-grow: 1;
    flex-shrink: 0;
    font-size: 28px;
    margin-right: 5px;
  }
  .right-bar{
    border-radius: 5px;
    display: flex;
    align-items: center;
    height: 40px;
  }

  .right-bar-item {
    min-width: 50px;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    flex-grow: 1;
    align-items: center;
    text-align: center;
  }
  .menu-button{
    height:100%;
    width: 100%;
    display: flex;

    text-align: center;
    align-items: center;
  }
  .menu-button > div{
    width:100%;
  }


  .right-bar-item:hover {
    background-color: #0050b3;
  }

</style>
<script>

  let dropdown_item = resolve =>{
  	require(['../dropdown_item'],resolve);
  }
  export default{
      components: {
          'dropdown_item': dropdown_item
      },
      props: {
        type:{
          type: String,
          default: "menu",
        }
      },
      data(){
          return {
            dropdownList: [
                'test1','test2','test3'
            ],
          }
      },
    methods:{
      toggleMenu: function(){
        this.$emit('toggleMenu');
      },
      onBack: function(){
        this.$emit('onBack');
      }
    }
  }
</script>
